{extend name="public:layout" /}
{block name="title"}批量导入{/block}
{block name="head"}
{:widget('common/Form/uploaderRes')}
<script src="/public/plugins/template/template.js"></script>
<link href="/public/plugins/chosen/chosen.css" rel="stylesheet">
<script src="/public/plugins/chosen/chosen.jquery.js"></script>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> 批量导入</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-sm-2 control-label">导入模型</label>
                    <div class="col-sm-4">
                        <select id="channel" name="channel" class="form-control">
                            <option value="">请选择导入模型</option>
                            {volist name="moudle" id="vo"}
                            <option value="{$vo.mid}">{$vo.moudle_name}模型</option>
                            {/volist}
                            <option value="-1">商品模型</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">附件上传</label>
                    <div class="col-sm-10">
                        <div id="filePicker">上传excel</div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="importBlock" style="display:none;">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> 导入设置</li>
            </ol>
        </div>
        <div class="ibox-content">
            <div id="importTpl"></div>
        </div>
    </div>
    <script id="ajaxImportTpl" type="text/html">
        <form method="post" class="form-horizontal" id="importForm">
            <input type="hidden" name="channel" value="{{ channel }}"/>
            <div class="form-group">
                <label class="col-sm-2 control-label">导入栏目</label>
                <div class="col-sm-4">
                    {{ #cid_select }}
                </div>
                {{ if is_extend==1 }}
                <label class="col-sm-2 control-label">扩展属性</label>
                <div class="col-sm-4">
                    <select name="extend[]" class="form-control chosen-select" data-placeholder="选择扩展属性" multiple="multiple">
                        <option value="-1"></option>
                        {{ each list as val ind }}
                        <option value="{{ ind }}">{{ val }}</option>
                        {{ /each}}
                    </select>
                </div>
                {{ /if }}
            </div>
            <div class="form-group">
                {{ each fields as vo i }}
                <label class="col-sm-2 control-label">{{ vo.title }}({{ vo.field_type }})<span class="text-danger">{{ vo.validate }}</span></label>
                <div class="col-sm-4">
                    <select name="col[{{ vo.field_name }}]" class="form-control">
                        <option value="-1">不导入</option>
                        {{ each list as val ind }}
                        <option value="{{ ind }}">{{ val }}</option>
                        {{ /each}}
                    </select>
                </div>
                {{ /each }}
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <div id="">
                        <iframe class="J_iframe" style="display: none" scrolling="no" id="iframe" name="iframe"
                                width="100%" height="100%" src="" frameborder="0"
                        ></iframe>
                    </div>
                    <button class="btn btn-lg btn-block btn-warning" id="btnImport" type="button">数据量({{ total }}),导入数据 <span id="num"></span></button>
                </div>
            </div>
        </form>
    </script>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        $(document).on('click', '#btnImport', function (e) {
            getAjax("{:url('index')}", $('#importForm').serialize(), function (res) {
                if (res.code == 1) {
                    $('#btnImport').attr('disabled', 'disabled');
                    $('#iframe').attr('src', res.url).show();
                } else {
                    alert(res.msg);
                    return false;
                }
            })
        });
        $(document).on('click', '#cid', function (e) {
            var channel = $('#channel').val();
            var cid = $(this).val();
            if(channel==-1 && cid>0){ //取对应扩展属性字段
                console.info('商品扩展属性先放一放！');
            }
        });
    });

    var utype = "{$utype}";
    // 文件上传
    var uploader = WebUploader.create({
        auto: true,
        duplicate: true,
        swf: '/public/plugins/webuploader/Uploader.swf',
        server: "/plus/uploader/index.html?utype=" + utype + "&action=uploadfile&local=1",
        pick: '#filePicker',
        fileNumLimit: 1, //一次最多10个附件
        fileVal: 'upfile',
        accept: {
            title: 'file',
            extensions: 'xls,xlsx,csv',
            mimeTypes: '.xls,.xlsx,csv'
        }
    });
    // 当有文件被添加进队列的时候
    uploader.on('beforeFileQueued', function (file) {
        var channel = $('#channel').val();
        if (channel == '') {
            alert('请选择要导入的模型！');
            return false;
        }
    });
    //上传成功后触发
    uploader.on('uploadSuccess', function (file, response) {
        if (response.state == 'SUCCESS') { //正常上传文件
            uploader.removeFile(file, true); //移除队列中得文件
            var channel = $('#channel').val();
            var startLine = $('#startLine').val();
            getAjax("{:url('formatData')}", {
                file: response.url,
                channel: channel,
                start_line: startLine
            }, function (res) {
                if (res.code == 1) {
                    var html = template('ajaxImportTpl', res.data);
                    $('#importTpl').html(html);
                    $('#total').text(res.data.total);
                    $('#importTotal').text(0);
                    $('#importBlock').show();
                    $('.chosen-select').chosen({ allow_single_deselect : true });
                    $('.chosen-select').trigger("liszt:updated");
                } else {
                    alert(res.msg);
                }
            });
        } else {
            alert(response.state);
        }
    });
</script>
{/block}